<!DOCTYPE html>
<html lang="en" ng-app="test_app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/DJ.css" rel="stylesheet">
    <link href="css/PLUG.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/static.css" rel="stylesheet">
    <link href="css/weui.css" rel="stylesheet">
    <link href="css/sign.css" rel="stylesheet">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/angular/angular-resource.js"></script>
</head>
<body ng-controller="testCtrl">
<div class="sign-time-box-title bg-major">考勤日历</div>
<div class="sign-time-box" id="calendar">
    <div class='sign_main' id='sign_layer'>
        <div class='sign_succ_calendar_title'>
            <div class='calendar_month_next' ng-click='goNextMonth()'>下月</div>
            <div class='calendar_month_prev' ng-click='goPrevMonth()'>上月</div>
            <div class='calendar_month_span'>{{nowDate}}</div>
        </div>
        <div class='sign' id='sign_cal' compile="sign_cal">
        </div>
    </div>
</div>
<div class="sign-time-box-intro">
    <div class="time-box-intro">
        <img src="images/icon/dj-40.png" height="20"/>
        <!--<span>已签到</span>-->
    </div>
</div>
<script>
    var apptest = angular.module('test_app', [], function($compileProvider) {
        $compileProvider.directive('compile', function($compile) {
            return function(scope, element, attrs) {
                scope.$watch(
                        function(scope) {
                            return scope.$eval(attrs.compile);
                        },
                        function(value) {
                            element.html(value);
                            $compile(element.contents())(scope);
                        }
                );
            };
        });
    });

    apptest.controller("testCtrl",function($scope,$sce){
        var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
        var showYear = 2015;
        var showMonth = 1;
        var showDays = 1;
        var eventName = "load";

        //初始化日历
        $scope.initDate = function(signList){
            $scope.setMonthAndDay();
            $scope.draw(signList);
        },
        //画布
        $scope.draw = function(signList) {
            var str = $scope.drawCal(showYear, showMonth, signList);
            $scope.sign_cal = str;
//            $scope.$broadcast("test",str);
//            $scope.drawHTML = str;
//            $scope.sign_cal = $sce.trustAsHtml(str);
//            var test = angular.element(document.querySelector("#sign_cal"));
//            test.injector().invoke(function($compile){
//                var scope = angular.element(str).scope();
//                $compile(str)(scope);
//            })

            $scope.sign_cal = $sce.trustAsHtml(str);
            var calendarName = showYear + "年" + showMonth + "月";
            $scope.nowDate = calendarName;
        },
        //下个月
        $scope.goNextMonth = function () {
            var signList = [{
                "signDay": "10"
            },
                {
                    "signDay": "11"
                },
                {
                    "signDay": "12"
                },
                {
                    "signDay": "13"
                }];
            eventName = "next";
            $scope.initDate(signList);
        },
        $scope.goPrevMonth = function () {
            var signList = [{
                "signDay": "10"
            },
                {
                    "signDay": "11"
                },
                {
                    "signDay": "12"
                },
                {
                    "signDay": "13"
                }];
            eventName = "prev";
            $scope.initDate(signList);
        },
        $scope.setMonthAndDay = function() {
            switch (eventName) {
                case "load":
                    var current = new Date();
                    showYear = current.getFullYear();
                    showMonth = current.getMonth() + 1;
                    break;
                case "prev":
                    var nowMonth = $scope.nowDate.split("年")[1].split("月")[0];
                    showMonth = parseInt(nowMonth) - 1;
                    if (showMonth == 0) {
                        showMonth = 12;
                        showYear -= 1;
                    }
                    break;
                case "next":
                    var nowMonth = $scope.nowDate.split("年")[1].split("月")[0];
                    showMonth = parseInt(nowMonth) + 1;
                    if (showMonth == 13) {
                        showMonth = 1;
                        showYear += 1;
                    }
                    break;
            }
        },
        $scope.getDaysInmonth = function(iMonth, iYear) {
            var dPrevDate = new Date(iYear, iMonth, 0);
            return dPrevDate.getDate();
        },
        $scope.bulidCal = function(iYear, iMonth) {
            var aMonth = new Array();
            aMonth[0] = new Array(7);
            aMonth[1] = new Array(7);
            aMonth[2] = new Array(7);
            aMonth[3] = new Array(7);
            aMonth[4] = new Array(7);
            aMonth[5] = new Array(7);
            aMonth[6] = new Array(7);
            var dCalDate = new Date(iYear, iMonth - 1, 1);
            var iDayOfFirst = dCalDate.getDay();
            var iDaysInMonth = $scope.getDaysInmonth(iMonth, iYear);
            var iVarDate = 1;
            var d, w;
            aMonth[0][0] = "日";
            aMonth[0][1] = "一";
            aMonth[0][2] = "二";
            aMonth[0][3] = "三";
            aMonth[0][4] = "四";
            aMonth[0][5] = "五";
            aMonth[0][6] = "六";
            for (d = iDayOfFirst; d < 7; d++) {
                aMonth[1][d] = iVarDate;
                iVarDate++;
            }
            for (w = 2; w < 7; w++) {
                for (d = 0; d < 7; d++) {
                    if (iVarDate <= iDaysInMonth) {
                        aMonth[w][d] = iVarDate;
                        iVarDate++;
                    }
                }
            }
            return aMonth;
        },
        $scope.ifHasSigned = function(signList, day) {
            var signed = false;
            for(var i=0;i<signList.length;i++){
                if (signList[i].signDay == day) {
                    signed = true;
                }
            }
            return signed;
        },
        $scope.drawCal = function(iYear, iMonth, signList) {
            var myMonth = $scope.bulidCal(iYear, iMonth);
            var htmls = new Array();
            htmls.push("<table>");
            htmls.push("<tr>");
            htmls.push("<th>" + myMonth[0][0] + "</th>");
            htmls.push("<th>" + myMonth[0][1] + "</th>");
            htmls.push("<th>" + myMonth[0][2] + "</th>");
            htmls.push("<th>" + myMonth[0][3] + "</th>");
            htmls.push("<th>" + myMonth[0][4] + "</th>");
            htmls.push("<th>" + myMonth[0][5] + "</th>");
            htmls.push("<th>" + myMonth[0][6] + "</th>");
            htmls.push("</tr>");
            var d, w;
            for (w = 1; w < 7; w++) {
                htmls.push("<tr>");
                for (d = 0; d < 7; d++) {
                    var ifHasSigned = $scope.ifHasSigned(signList, myMonth[w][d]);
                    if (ifHasSigned) {
                        htmls.push("<td class='on' ng-click='opena("+(!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ")+")'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
                    } else {
                        htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
                    }
                }
                htmls.push("</tr>");
            }
            htmls.push("</table>");
            return htmls.join('');
        }

        $scope.opena = function (num) {
            alert(num);
        }
        $scope.initDate(signList);
    });
</script>
</body>

</html>